<template>
  <div class="box_yj" ref="parent">
    <span></span>
    <div class="section-header">政策关注热点词云</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getPolicySearchKeywords } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    init() {
      this.jz=false
      getPolicySearchKeywords(this.dateProp)
      .then((res) => {
        this.jz=true
        if(res.data.data && res.data.data.length) {
          this.chartData = res.data.data
          this.$nextTick(_=>{
            this.chartsInit();
          })
        }else{
          this.chartData = null
        }
      })
    },
    chartsInit() {
      var worldCloudoption = {
 			    tooltip: {
 			        show: true
 			    },
 			    series: [{
 			        name: '热门专业词云',
 			        type: 'wordCloud',
 			        sizeRange: [6, 66],
 			        rotationRange: [-45, 90],
 			        textPadding: 0,
 			        autoSize: {
 			            enable: true,
 			            minSize: 6
 			        },
 			        textStyle: {
 			            normal: {
 			                color: function() {
 			                    return 'rgb(' + [
 			                        Math.round(Math.random() *  255),
 			                        Math.round(Math.random() * 255),
 			                        Math.round(Math.random() * 50)
 			                    ].join(',') + ')';
 			                }
 			            },
 			            emphasis: {
 			                shadowBlur: 10,
 			                shadowColor: '#333'
 			            }
 			        },
 			        data: this.chartData
 			    }]
 			}

      let chart = this.$echarts.init(this.$refs.charts);
      chart.setOption(worldCloudoption);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>